<template>
  <div class="service-trend">
    <div class="chart" id="serviceTrendLine"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "ServiceTrend",
  methods:{
    initChart(){
      const chart=echarts.init(document.getElementById('serviceTrendLine'));
      const option={
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          boundaryGap: false,
          data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:15,
          top:20,
          right:20,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
              type:'dashed'
            }
          }
        },
        color:['#FBC102'],
        series:[
          {
            name:'次数',
            type:'line',
            data:[57,42,59,37,40,15,25,0,0,0,0,0],
            smooth:true,
            areaStyle:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上到下渐变
                  [
                    { offset: 0, color: 'rgba(251,193,2,0.8)' },
                    { offset: 1, color: 'rgba(251,193,2,0.1)' }
                  ]
              )
            },
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart();
  }
}
</script>
<style scoped lang="scss">
.service-trend{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
